<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>GrapesJS</title>

    <!-- grapes的基础文件 -->
    <link rel="stylesheet" href="./web/grapes/grapes.min.css" />
    <script src="./grapes.min.js"></script>
    <script src="./web/grapes-plus/grapes-plus.js"></script>

    <!-- <link href="web/plugins/font-awesome-4.7.0/css/font-awesome.min.css" /> -->

    <!-- 自定义界面文件 -->
    <link rel="stylesheet" href="./web/index/simplify.css" />
    <link rel="stylesheet" href="./web/index/action.css" />
  </head>

  <body>
    <div class="main-pan">
      <div class="actionPanel">
        <div class="blockPanel">
          <div id="btn1" class="blockBtn">轮播图片</div>
          <div id="btn2" class="blockBtn">菜单</div>
          <div id="btn3" class="blockBtn">热销宝贝</div>
          <div id="btn4" class="blockBtn">分类精选</div>
          <div id="btn5" class="blockBtn">橱窗推荐</div>
        </div>
        <div class="funPanel">
          <div class="funBtn" onclick="sendData()">发布数据</div>
          <div class="funBtn" onclick="loadDataAndRender()">加载数据</div>
          <div class="funBtn" onclick="loadDefaultLayout()">默认布局</div>
        </div>
      </div>
      <div id="editorPanel"></div>
    </div>

    <script type="text/javascript">
      /**
       * 为父window提供调用方法
       * */

      const frameAction = new FrameAction(window, window.parent);

      var isInitFinish = false;
      var waitInitFinishFuns = [];
      frameAction.setAsyncPostEvent("onInitFinish", (reqData, resFun) => {
        if (isInitFinish) {
          resFun();
        } else {
          waitInitFinishFuns.push(resFun);
        }
      });

      function initFinish() {
        //为外部提供初始化完成的监听
        isInitFinish = true;
        waitInitFinishFuns.forEach((fun) => {
          fun();
        });
        waitInitFinishFuns = [];
      }

      frameAction.setPostEvent("genProjectData", () => {
        return extGrapesjs.genProjectData();
      });
      frameAction.setPostEvent("setProjectData", (data) => {
        extGrapesjs.setProjectData(data);
      });

      /***
       *extGrapesjs ...
       */

      const extGrapesjs = new ExtGrapesjs();
      extGrapesjs.init({
        container: "#editorPanel",
        styles: ["./web/index/simplify.css", "./web/index/editor.css"],
      });

      function addNewBlock(p) {
        extGrapesjs.addComponentType({
          type: p.type,
          domText: p.domText,
          attr: p.attr,
        });

        extGrapesjs.addBlock({
          labelEl: p.labelEl,
          type: p.type,
        });
      }

      /** 添加block  **/

      addNewBlock({
        labelEl: document.getElementById("btn1"),
        type: "b1",
        attr: { droppable: false }, //禁止添加其他组件
        domText: `
        <img src="./web/index/img/index-poster.png" style="height: auto;">
        `,
      });

      addNewBlock({
        labelEl: document.getElementById("btn2"),
        type: "b2",
        attr: { droppable: false }, //禁止添加其他组件
        domText: `
        <img src="./web/index/img/index-menu.png" style="height: auto;">
        `,
      });

      addNewBlock({
        labelEl: document.getElementById("btn3"),
        type: "b3",
        attr: { droppable: false }, //禁止添加其他组件
        domText: `
        <img src="./web/index/img/index-hotSale.png" style="height: auto;">
        `,
      });
      addNewBlock({
        labelEl: document.getElementById("btn4"),
        type: "b4",
        attr: { droppable: false }, //禁止添加其他组件
        domText: `
        <img src="./web/index/img/index-selection.png" style="height: auto;">
        `,
      });
      addNewBlock({
        labelEl: document.getElementById("btn5"),
        type: "b5",
        attr: { droppable: false }, //禁止添加其他组件
        domText: `
        <img src="./web/index/img/index-recommend.png" style="height: auto;">
        `,
      });

      /** 数据处理  **/

      //保存数据
      function sendData() {
        console.log("发布数据");
        var currData = extGrapesjs.genProjectData();
        var currDataStr = JSON.stringify(currData);
        console.log(currDataStr);
        localStorage.setItem("projectData", currDataStr);
      }

      //加载保存的数据
      function loadDataAndRender() {
        console.log("加载数据");
        var orgDataStr = localStorage.getItem("projectData");
        console.log(orgDataStr);
        var orgData = orgDataStr ? JSON.parse(orgDataStr) : null;
        extGrapesjs.setProjectData(orgData);
      }

      function loadDefaultLayout() {
        const data = {
          type: "eg-mainPanel",
          items: [{ type: "b1" }, { type: "b2" }, { type: "b5" }],
        };
        extGrapesjs.setProjectData(data);
      }
      // extGrapesjs.editor.on("component:selected", (c) => {
      //   console.log("");
      //   console.log("当前被选择的组件：");
      //   console.log(c);
      // });

      initFinish();
      /** end  **/
    </script>
  </body>
</html>
